<script setup lang="ts">
import { computed } from "vue";
import { useLayoutStoreWithOut } from "~/store/modules/layout";
import { useRouter } from "vue-router";

const props = defineProps(["query"]);

const layoutStore = useLayoutStoreWithOut();
const router = useRouter();

const route = computed(() => {
	return router.currentRoute.value.meta;
});
const backRouteName = computed(() => {
	return router.currentRoute.value?.query?.back;
});

const goback = () => {
	layoutStore.delTagItem(props.query || {}, { routeName: backRouteName.value });
};
</script>

<template>
	<div class="breadCrumb-wrapper">
		<i class="mr:16 text-color icon iconfont icon-fanhui" @click="goback()"></i>
		<span class="breadCrumb-wrapper-title">{{ route.title }}</span>
	</div>
</template>

<style scoped lang="less">
.breadCrumb-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	height: 56px;
	background: #ffffff;
	box-shadow: inset 0px -1px 0px #f0f0f0;
	padding-left: 24px;

	.icon {
		margin-right: 12px;
		color: @primary-color;
		cursor: pointer;
	}

	.breadCrumb-wrapper-title {
		font-weight: 700;
		font-size: 18px;
		color: rgba(0, 0, 0, 0.85);
	}
}
</style>
